import React, { useState, useRef, useEffect } from "react"
import NavTop from "./NavTop"
import "./ProfileEdit.scss"
import { RightOutline } from "antd-mobile-icons"
import {
  ActionSheet,
  Toast,
  Popup,
  TextArea,
  DatePickerView,
  Dialog
} from "antd-mobile"
import { updatePhoto, getUserMsg, updateuserMsg } from "../store/actions"
import { logout } from "../store/actions"
import { useDispatch, useSelector } from "react-redux"
import { LeftOutline } from "antd-mobile-icons"
import dayjs from "dayjs"
import { useHistory } from "react-router-dom"

function ProfileEdit() {
  const dispatch = useDispatch()
  //  获取用户自己的信息
  useEffect(() => {
    dispatch(getUserMsg())
  }, [dispatch])

  const history = useHistory()
  const [avatarVisible, setAvatarVisible] = useState(false)
  const { userProfile } = useSelector((state) => state.user)
  const { birthday, gender, name, photo } = userProfile
  // 文件上传
  const photoRef = useRef()
  // 点击触发文件上传事件
  const UploaderPhoto = () => {
    photoRef.current.click()
  }
  // 选择图片
  const changePhoto = async (e) => {
    if (!e.target.files) {
      return Toast.show({
        content: "请选择要上传的头像",
        duration: 1000
      })
    }

    const formData = new FormData()
    formData.append("photo", e.target.files[0])

    await dispatch(updatePhoto(formData))

    setAvatarVisible(false)
    Toast.show({
      content: "上传成功",
      duration: 600
    })
  }
  const avatarActions = [
    { text: "拍照", key: "copy" },
    { text: "本地选择", key: "edit" }
  ]

  // 修改昵称模态框
  const [nameVisible, setNameVisible] = useState(false)
  const [nameValue, setNameValue] = useState(name)
  // 修改昵称
  const updateName = () => {
    dispatch(updateuserMsg("name", nameValue))
    setNameVisible(false)
  }

  // 性别
  const [genderVisible, setGenderVisible] = useState(false)
  const genderActions = [
    { text: "男", key: "Mam" },
    { text: "女", key: "Woman" }
  ]
  const UploaderGender = (active) => {
    const value = active.text === "男" ? 0 : 1
    dispatch(updateuserMsg("gender", value))
    setGenderVisible(false)
  }

  // 生日
  const [birthdayVisible, setBirthdayVisible] = useState(false)
  const now = new Date()
  const [DataValue, setDataValue] = useState(now)
  const updateBirday = () => {
    const value = dayjs(DataValue).format("YYYY-MM-DD")
    dispatch(updateuserMsg("birthday", value))
    setBirthdayVisible(false)
  }

  // 退出登录
  const onLogout = () => {
    Dialog.confirm({
      title: "温馨提示",
      content: "亲,你确定要退出吗?",
      onConfirm: () => {
        dispatch(logout())
        history.push("/login")
      }
    })
  }
  return (
    <div>
      <NavTop title="个人信息"></NavTop>
      <div className="userMes">
        <div
          className="avatar"
          onClick={() => {
            setAvatarVisible(true)
          }}
        >
          <span>头像</span>
          <div className="avatar_right">
            <img
              src={photo || "http://toutiao.itheima.net/images/user_head.jpg"}
              alt=""
            ></img>

            <RightOutline
              style={{ verticalAlign: "super" }}
              className="rightOut"
            />
          </div>
        </div>
        <ActionSheet
          cancelText="取消"
          visible={avatarVisible}
          actions={avatarActions}
          onClose={() => setAvatarVisible(false)}
          onAction={UploaderPhoto}
        ></ActionSheet>
        <input
          type="file"
          ref={photoRef}
          style={{ display: "none" }}
          onChange={changePhoto}
        ></input>
        <div className="avatar" onClick={() => setNameVisible(true)}>
          <span>昵称</span>
          <div className="avatar_right">
            <span>{name}</span>
            <RightOutline className="rightOut" />
          </div>
        </div>
        <Popup
          visible={nameVisible}
          onMaskClick={() => {
            setNameVisible(false)
          }}
          position="right"
          bodyStyle={{ width: "100%" }}
        >
          <div className="navtop">
            <span onClick={() => setNameVisible(false)}>
              <LeftOutline />
            </span>
            <p>编辑昵称</p>
            <div className="publish" onClick={() => updateName(nameValue)}>
              提交
            </div>
          </div>
          <div className="commentActive">
            <TextArea
              placeholder="请输入昵称"
              value={nameValue}
              onChange={(value) => setNameValue(value)}
            ></TextArea>
          </div>
        </Popup>
        <div className="avatar">
          <span>简介</span>
          <div className="avatar_right">
            <span>未填写</span>
            <RightOutline className="rightOut" />
          </div>
        </div>
        <div className="line"></div>
        <div className="avatar" onClick={() => setGenderVisible(true)}>
          <span>性别</span>
          <div className="avatar_right">
            <span>{gender === 0 ? "男" : "女"}</span>
            <RightOutline className="rightOut" />
          </div>
        </div>
        <ActionSheet
          cancelText="取消"
          visible={genderVisible}
          actions={genderActions}
          onAction={(active) => UploaderGender(active)}
        ></ActionSheet>
        <div className="avatar" onClick={() => setBirthdayVisible(true)}>
          <span>生日</span>
          <div className="avatar_right">
            <span>{birthday}</span>
            <RightOutline className="rightOut" />
          </div>
        </div>
        <Popup
          visible={birthdayVisible}
          onMaskClick={() => {
            setBirthdayVisible(false)
          }}
          bodyStyle={{ height: "40vh" }}
        >
          <div className="selectBirthday">
            <span className="close">取消</span>
            <p>选择生日</p>
            <span className="confirm" onClick={updateBirday}>
              确认
            </span>
          </div>

          <DatePickerView
            value={DataValue}
            onChange={(val) => {
              setDataValue(val)
            }}
          />
        </Popup>

        <div className="logout" onClick={onLogout}>
          退出登录
        </div>
      </div>
    </div>
  )
}

export default ProfileEdit
